<template>
  <div class="calendar-wrapper">
    <div class="swiper">
      <div class="scroll-wrap" :style="{transform: 'translateX('+swiperIndex*600+'px)'}">
        <img src="https://pic.netbian.com/uploads/allimg/210627/225912-16248059523218.jpg" alt="">
        <img src="https://pic.netbian.com/uploads/allimg/210307/232710-1615130830949f.jpg" alt="">
        <img src="https://pic.netbian.com/uploads/allimg/210307/185844-16151147246af3.jpg" alt="">
      </div>
    </div>

    <div class="wrap">
      <div class="week" v-for="v in week" :key="v">{{v}}</div>
      <div class="day" :class="{active: k.isSelected, grey: k.type!='normal'}" v-for="(k, i) in dateList" :key="i">
        {{k.day}}
      </div>
    </div>

    <h1 style="text-align:center">{{currentDay.year}}/{{currentDay.month}}</h1>
    <div class="toggle">
      <div @click="toggleDate(false)">←</div>
      <div>toggle Month</div>
      <div @click="toggleDate(true)">→</div>
    </div>
    <div class="toggle">
      <div @click="toggleSwiper(false)">←</div>
      <div>toggle Swiper</div>
      <div @click="toggleSwiper(true)">→</div>
    </div>
  </div> 
</template>

<script>
export default {
  data(){
    return{
      week:['天', '一', '二', '三', '四', '五', '六'],
      dateList: [],
      yearMonths:[], //当前年份下所有月份的天数量
      currentDay:{},  // 当前日期

      swiperIndex:0,
    }
  },
  methods:{
    init(){
      this.getCurrentDay()
      this.generatorYearMonth()

      this.createDayList()
    },
    getCurrentDay(){
      let d = new Date()
      this.currentDay.year = d.getFullYear()
      this.currentDay.month = d.getMonth() + 1
      this.currentDay.day = d.getDate()
    },
    generatorYearMonth(){
      // 计算当前年份下的所有月份
      const {year} = this.currentDay
      let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { // 闰年处理
        daysInMonth[1] = 29
      }
      this.yearMonths = daysInMonth
    },
    createDayList(){
      const {year, month, day} = this.currentDay
      let currentMonth = new Date().getMonth()+1
      this.dateList = []
      let firstDay = new Date(year, month - 1, 1).getDay()
      let lastDay = new Date(year, month, 1).getDay()
      // 计算上月
      for(let i =0;i<firstDay;i++){
        let [fYear, fMonth, fDay] = new Date(year, month-1, -i).toLocaleDateString().split('/')
        this.dateList.unshift({type:'pre', day:fDay, month:fMonth, year:fYear})
      }
      for(let i=0;i<this.yearMonths[month-1];i++){
        this.dateList.push({type:'normal', year, month, day: i+1, isSelected: day==i+1&&currentMonth==month})
      }
      for(let i=0;i<=6-lastDay;i++){
        let [lYear, lMonth, lDay] = new Date(year, month+1, i+1).toLocaleDateString().split('/')
        this.dateList.push({type:'next', year:lYear, month:lMonth, day:lDay})
      }
    },
    toggleDate(status){
      if(status){
        if(this.currentDay.month==12){
          this.currentDay.year++
          this.currentDay.month = 1
        }else{
          this.currentDay.month++
        }
      }else{
        if(this.currentDay.month==1){
          this.currentDay.year--
          this.currentDay.month = 12
        }else{
          this.currentDay.month--
        }
      }
      // status?this.currentDay.month++:this.currentDay.month--
      this.createDayList()
    },
    toggleSwiper(status){
      status?this.swiperIndex--:this.swiperIndex++
    }
  },
  created(){
    this.init()
  }
}
</script>

<style lang="less" scoped>
.wrap{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  // grid-gap: 20px;
}
.week{
  height: 40px;
  background-color: #282C34;
  display: flex;
  justify-content: center;
  align-items: center;
  color: 24px;
  color: #fff;
}
.day{
  .week();
  height: 40px;
  background: #fff;
  color: #000;
  font-weight: bold;
  &.active{
    color:#fff;
    background-color: #2D4350;
  }
  &.grey{
    font-weight: normal;
    color: gray;
  }
}
.toggle{
  margin-top: 40px;
  background-color: #000;
  display: flex;
  height: 40px;
  &>div{
    flex: 1;
    font-size: 52px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    &:hover{
      color: greenyellow;
    }
  }
}
</style>

<style lang="less" scoped>
.swiper{
  margin: auto;
  width: 600px;
  min-height: 200px;
  border: 1px solid red;
  overflow: hidden;
  .scroll-wrap{
    transition: all .5s;
    display: flex;
  }
  img{
    width: 100%;
  }
}
</style>